<template>
  <div>
    <form action="/">
      <van-search
        v-model="listQuery.name"
        clearable
        show-action
        placeholder="请输入搜索姓名"
        @search="onSearch"
        @cancel="onCancel"
      />
      <van-field
        style="padding-left: 23px"
        left-icon="calendar-o"
        clickable
        readonly
        name="calendar"
        :value="range_date"
        placeholder="点击选择日期"
        @click="showCalendar = true"
        clearable
      />
    </form>
    <van-calendar
      type="range"
      v-model="showCalendar"
      :min-date="minDate"
      @confirm="onConfirm"
    />
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell-group>
        <van-cell
          v-for="item in cards"
          :key="item.id"
          :title="item.r_card_name"
          :value="item.r_card_amount + ' 元 | ' + item.r_count + ' 张 | '"
          :label="item.retailer_name"
          is-link
          @click="onCellClick(item)"
        >
          <template #label>
            <div>{{ item.card_retailer_name }}</div>
            <div>{{ item.name }}</div>
            <div>{{ item.update_time }}</div>
          </template>
          <template>
            <div>{{ item.r_card_amount + " 元 " }}</div>
            <div>{{ item.r_count + "/(" + item.r_unused_count + ") 张 " }}</div>
            <div>{{ item.status_name }}</div>
          </template>
        </van-cell>
      </van-cell-group>
    </van-list>
    <van-action-sheet
      title="赠卡详情"
      v-model="actionShow"
      cancel-text="取消"
      close-on-click-action
      @cancel="onSheetCancel"
    >
      <div class="content">
        <van-cell title="优惠卡" :value="card.r_card_name"/>
        <van-cell title="赠卡商家" :value="card.retailer_name"/>
        <van-cell title="所属商家" :value="card.card_retailer_name"/>
        <van-cell title="面值" :value="card.r_card_amount + '元'"/>
        <van-cell title="赠送数量" :value="card.r_count + '张'"/>
        <van-cell title="待激活数量" :value="card.r_unused_count + '张'"/>
        <van-cell title="经办人" :value="card.name"/>
        <van-cell title="客户" :value="card.customer_name"/>
        
        <van-image width="100%" height="200" :src="card.r_card_image" />
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
// import { mapGetters } from "vuex";
// import NavBar from "@/components/NavBar";
import { formatDateTime } from "@/utils/datetime";
import { wxGiftCardList } from "@/api/card";

export default {
  name: "GiftCardList",
  components: {
    // NavBar,
  },
  props: ["retailer_id"],
  computed: {
    minDate() {
      let datetime = new Date();
      datetime = datetime.setFullYear(datetime.getFullYear() - 5);
      return new Date(datetime);
    },
  },
  data() {
    return {
      title: this.$route.meta.title,

      cards: [],
      card: {},
      loading: false,
      finished: false,
      actionShow: false,
      showCalendar: false,
      range_date: null,

      listQuery: {
        page: 1,
        page_size: 10,
        retailer_id: this.retailer_id,
        name: null,
        r_openid: localStorage.getItem("openid"),
        begin_date: null,
        end_date: null,
      },
    };
  },
  mounted() {},
  methods: {
    onLoad() {
      this.getGiftCards();
    },
    onSearch() {
      // console.log(val);
      this.cards = [];
      this.listQuery.page = 1;
      this.onLoad();
    },

    onCancel() {
      this.cards = [];
      this.range_date = null;
      this.listQuery.end_date = null;
      this.listQuery.begin_date = null;
      this.listQuery.page = 1;
      this.onLoad();
    },

    onConfirm(date) {
      const [start, end] = date;
      this.showCalendar = false;
      const begin_date = formatDateTime(start, "YYYY-MM-DD");
      const end_date = formatDateTime(end, "YYYY-MM-DD");
      this.listQuery.begin_date = begin_date;
      this.listQuery.end_date = end_date;
      this.range_date = `${begin_date} / ${end_date}`;
      this.cards = [];
      this.listQuery.page = 1;
      this.onLoad();
    },

    onSheetCancel(){
      this.actionShow = false;
      this.card = {};
    },

    onCellClick(item) {
      this.actionShow = true;
      console.log(item);
      this.card = item;
    },

    getGiftCards() {
      this.loading = true;
      wxGiftCardList(this.listQuery)
        .then((res) => {
          console.log(res);
          if (res.data.results.length === 0) {
            this.cards = []; // 清空数组
            this.finished = true; // 停止加载
          }
          this.listQuery.page = res.data.page;
          this.cards.push(...res.data.results);
          this.loading = false;

          if (this.cards.length >= res.data.count) {
            this.finished = true; // 结束加载状态
          }
        })
        .catch(() => {
          this.loading = false;
          this.finished = true;
          this.$notify({
            type: "danger",
            message: "获取数据失败！",
          });
        });
    },
  },
};
</script>

<style  scoped>
/* .van-field__label {
  color: black;
}
.van-col {
  margin: 5px;
  padding: 0px;
} */

.van-cell__title {
  flex: 3;
}
.van-cell__value {
  flex: 1;
}
.van-cell__label div {
  height: 20px;
}
.content .van-cell__title {
  flex: 1;
}
.content .van-cell__value {
  flex: 3;
}
</style>